<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mission18</title>
	<style type="text/css">
		fieldset{
			width: 80%;
			margin: 10px auto;
			border-radius: 10px;
			border: 1px solid #8e9197;
			padding: 20px;
		}
		fieldset button{
			width: 80px;
			height: 30px;
			color: white;
			background-color: #418c59;
			text-align: center;
			line-height: 30px;
			border: 0px;
			border-radius: 10px;
		}
		fieldset input{
			width: 200px;
			height: 30px;
			border-radius: 5px;
			border: 1px solid #5a5b5b;
		}
		.squard{
			width:40px;
			background: #e9605e;
			margin: 3px;
			position: absolute;
			bottom: 0px;
			border: 0.5px solid white;
		}
		#show-number{
			width: 80%;
			height: 300px;
			display:block ;
			margin: 20px auto;
			border: 1px solid #72A664;
			border-radius: 15px;
			overflow: hidden;
			position: relative;
		}
		span{
			position: absolute;
			top:-16px;
			color: #333333;
		}
	</style>
</head>
<body>
	<fieldset>
		<legend>请输入数字</legend>
		<input type="text">
		<button id="left-input">左侧入</button>
		<button id="right-input">右侧入</button>

		<button id="left-output">左侧出</button>
		<button id="right-output">右侧出</button>
		<button id="bubble-sort">冒泡排序</button>
	</fieldset>

	<div id="show-number"></div>
	<script type="text/javascript" src = "task.js"></script>
</body>
</html>